﻿
@{
    ViewData["Title"] = "GetKmInforOfCar";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<head>
    <style type="text/css">
        .layui-table-cell {
            height: auto !important;
            white-space: normal;
        }
    </style>


</head>

<div class="layui-container">

    <div class="layui-row">

        <div class="layui-col-md12">
            <table class="layui-hide" id="test" height="500px"> </table>
            <div id="toolbarDemo">
                <div class="layui-btn-container">

                </div>
            </div>
        </div>
        @*<div class="layui-col-md5">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <img id="begin" />

                    </div>
                    <div class="layui-col-md6">
                        <img  id="end"/>

                    </div>
                </div>
            </div>*@
    </div>
</div>

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            skin: 'line' //行边框风格
            , even: true //开启隔行背景
            //小尺寸的表格
            , elem: '#test'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , url: '/admin/GetKmInfor'
            , cellMinWidth: 20
            , cols: [[
                { field: 'id', width: 60, title: 'ID', sort: true }
                , { field: 'name', width: 80, title: '名字' }
                , { field: 'departure', width: 80, title: '出发地', sort: true }
                , { field: 'destination', width: 80, title: '到达地' }
                , { field: 'usersnumber', title: '乘车人', width: 10 } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , { field: 'mobile', title: '联系方式', width: 80, sort: true }
                , { field: 'usedate', title: '使用时间', width: 180, sort: true }
                , { field: 'isSelf', title: '是否自驾', width: 30,templet: '#usz'   }
                , { field: 'begin', title: '开始里程', hide: false, templet: '#bimg' }
                , { field: 'end', title: '结束里程', hide: false, templet: '#eimg' }
            ]],
            totalRow: true
            , page: true
            , id: 'id'
            , loading: true
        });
    });
</script>
<script type="text/html" id="bimg">
    <div> <img src="{{ d.begin }}" style="width: 100px; height: 100px;"> </div>
</script>
<script type="text/html" id="eimg">
    <div> <img src="{{ d.end }}" style="width: 100px; height: 100px;"> </div>
</script>

<script type="text/html" id="usz">

    {{#  if(d.isSelf=='1'){ }}
    是
    {{#  }else if(d.isSelf==''||d.isSelf=='0'){ }}
    否
    {{# } }}

</script>


